<template>
    <view class="main-box">
        <eui-background type="full">
            <view class="nva-bar">看板</view>
            <scroll-view 
                scroll-y 
                class="home-content" 
                refresher-enabled='true'
                refresher-default-style="white"
                :refresher-triggered="triggered"
                @refresherrefresh="templateUpper"
                :style="{height: scrollHeight + 'px'}"
            >
                <component
                    v-for="(item, index) in sortedComponents"
                    :key="item.sort"
                    :is="item.component"
                    :class="{ 'm-b_10': index < sortedComponents.length - 1 }"
                />
            </scroll-view>
            <CustomTabBar  current="看板"/>
        </eui-background>
    </view>
</template>
<script setup lang="ts">

import { ref, computed,  onMounted, onBeforeMount, watch } from 'vue';
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useMainStore } from '../../../store/modules/store';
import { useLoginStore } from '@/store/modules/useLoginStore';
import { components } from '@/hooks/useComponents';
import { useModuleDataStore } from '@/store/useModuleDataStore';
import { useRefreshStore } from '@/store/useRefreshStore';
import eventBus from '@/pages/MainViews/eventBus';

const CustomTabBar = components.CustomTabBar;
const mainStore = useMainStore();
const { loginInfo } = mainStore;
const LoginStore = useLoginStore();
const scrollHeight = ref<number>(0);
const componentsToLoad = ref<Array<{ name: string; sort: number }>>([]);

const moduleDataStore = useModuleDataStore();
const moduleData = moduleDataStore.dashboard;

// 初始化滚动区域高度
const initScrollView =() => {
    setTimeout(() => {
        uni.getSystemInfo({
            success: (res) => {
                const query = uni.createSelectorQuery().in(this);
                query.select('.home-content').boundingClientRect(data => {
                    scrollHeight.value = (res.windowHeight - data.top - 59);
                }).exec();
            }
        })
    }, 1000)
}

// 获取初始化模块列表
const getLoadModule = async () => {
  componentsToLoad.value = moduleData;
};

// 根据name返回对应的组件
const getComponent = (name: string) => components[name] || null;

// 计算属性：排序后的组件
const sortedComponents = computed(() => {
  return componentsToLoad.value
    .map(item => ({ ...item, component: getComponent(item.name) }))
    .filter(item => item.component !== null)
    .sort((a, b) => a.sort - b.sort);
});
// 下拉刷新
const refreshStore = useRefreshStore();
const triggered = ref(false);
const templateUpper = (e) => {
    if (!triggered.value) {
        triggered.value = true;
        let hasTrue = refreshStore.queryRefresh('dashboardRefresh')
        if (sortedComponents.value.length > 0 && hasTrue) {
            const moduleName = sortedComponents.value.map(item => item.name);
            for (var i = 0; i < moduleName.length; i++) {
                eventBus.emit('refresh-' + moduleName[i]);
            }

            refreshStore.triggerRefresh('dashboardRefresh');
        } else {
            uni.showToast({
                duration: 3500,
                icon: 'none',
                title: `5分钟内不要重复刷新, 请稍后重试`,
            });
        }
        setTimeout(() => {
            triggered.value = false;
        }, 600)
    }
};

onShow(() => {
    if (refreshStore && refreshStore.refreshTimeList) {
        const shouldRefresh = refreshStore.queryRefresh('dashboardRefresh');
        if (shouldRefresh) {
            refreshStore.triggerRefresh('dashboardRefresh');
        } else {
            console.log(`无需刷新@@@@@@@@@@@@@@@@@@@@`);
        }
    }
})

onLoad(() => {
    uni.hideTabBar();
})
// 生命周期钩子
onBeforeMount(async () => {
  await getLoadModule();
});

onMounted(() => {
  initScrollView();
});

watch(() => moduleDataStore.dashboard,(newVal) => {
    componentsToLoad.value = newVal;
  }, { immediate: true }
);

</script>
<style scoped lang="scss">
.main-box {
    height: calc(100vh - 50px);
    ::v-deep .uni-scroll-view-refresh {
        background: transparent !important;
    }
    ::v-deep .uni-scroll-view-refresher {
        background: transparent !important;
    }
}
.nva-bar {
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    color: #fff;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
}
.home-Head-box {
    position: relative;
    width: 100%;
    height: 100%;
}
.home-content {
    padding: 10px 10px 0;
    width: 100%;
    box-sizing: border-box;
    ::v-deep .uni-scroll-view {
        border-radius: 20rpx 20rpx 0rpx 0rpx;
    }
}
.m-b_10 {
    margin-bottom: 20rpx;
}
</style>